<template>
	<view class="address-form">
		<form @submit="submitForm">
			<!-- 联系人信息 -->
			<view class="form-section">
				<view class="section-title">联系人信息</view>

				<view class="form-item">
					<text class="form-label required">收货人</text>
					<input v-model="formData.name" class="form-input" placeholder="请输入收货人姓名" maxlength="20" />
				</view>

				<view class="form-item">
					<text class="form-label required">手机号</text>
					<input v-model="formData.phone" class="form-input" placeholder="请输入手机号码" type="number"
						maxlength="11" />
				</view>
			</view>

			<!-- 地址信息 -->
			<view class="form-section">
				<view class="section-title ">地址信息</view>

				<!-- 地区选择 - 使用cl-select-region组件 -->
				<view class="form-item">
					<text class="form-label required">所在地区</text>
					<cl-select-region v-if="options && options.length > 0" @change="onRegionChange"
						:options="options" :label-key="label" :value-key="label" v-model="formData.region"
						placeholder="请选择省市区" class="region-select"></cl-select-region>
				</view>

				<!-- 详细地址 -->
				<view class="form-item ">
					<text class="form-label required" >详细地址</text>
					<textarea v-model="formData.detail" class="form-textarea" placeholder="请输入详细地址（街道、门牌号等）"
						maxlength="100" auto-height />
				</view>
			</view>

			<!-- 设置选项 -->
			<view class="form-section">
				<view class="form-item switch-item">
					<text class="form-label">设为默认地址</text>
					<cl-switch v-model="formData.is_default" active-color="#007aff" active-value="1"
						inactive-value="0"></cl-switch>
				</view>
			</view>

			<!-- 提交按钮 -->
			<view class="form-actions">
				<view class="add-btn" @click="submitForm">
					{{ isEdit ? '保存修改' : '保存地址' }}
				</view>
			</view>
		</form>
		<cl-message ref="message"></cl-message>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				label: 'label',
				city_url: '',
				isEdit: false,
				addressId: '',
				options: [],
				formData: {
					name: '',
					phone: '',
					region: [], // 省市区数组 [province, city, district]
					province: '',
					city: '',
					district: '',
					detail: '',
					is_default: false,
				}
			}
		},
		computed: {

		},
		onLoad(options) {
			this.load()
			if (options.id) {
				this.isEdit = true
				this.addressId = options.id
				this.loadAddressData()
			}
		},
		methods: {
			load() {
				this.ajax(this.config.address.city, {}).then(res => {
					this.options = res.data
				})
			},
			loadAddressData() {
				this.ajax(this.config.address.view, {
					id: this.addressId
				}).then(res => {
					this.formData = res.data
				})
			},

			// 地区选择变化事件
			onRegionChange(value) {
				console.log('地区选择变化:', value)
				// value 是一个数组，包含省市区信息
				if (value && value.length === 3) {
					this.formData.province = value[0]
					this.formData.city = value[1]
					this.formData.district = value[2]
				}
			},

			// 提交表单
			submitForm() {
				console.log('提交地址数据:', this.formData)
				let url = this.config.address.create
				if (this.isEdit) {
					url = this.config.address.update
				}
				this.ajax(url, this.formData).then(res => {

					this.$refs["message"].open({
						message: res.msg,
						type: res.type
					});
					if (res.code == 0) {
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					}
				})


			}
		}
	}
</script>

<style>
	.address-form {
		background-color: #f5f5f5;
		padding-bottom: 50rpx;
		height: 100vh;
	}

	.form-section {
		background-color: #fff;
		margin-bottom: 20rpx;
		padding: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.form-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #f0f0f0;
	}

	.form-item:last-child {
		border-bottom: none;
	}

	.form-label {
		width: 180rpx;
		font-size: 28rpx;
		color: #333;
		flex-shrink: 0;
	}

	.form-input {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		text-align: right;
	}

	.form-textarea {
		flex: 1;
		font-size: 28rpx;
		color: #333;
		min-height: 120rpx;
		text-align: right;
	}

	.region-selector {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.region-select {
		width: 100%;
		text-align: right;
	}

	.switch-item {
		justify-content: space-between;
	}

	.form-actions {
		padding: 40rpx 30rpx;
	}

	::v-deep .cl-select__icon {
		top: 10px !important;
	}
	.add-btn {
		width: 100%;
		height: 80rpx;
		background-color: #ff6b35 !important;
		color: #fff !important;
		border: none !important;
		border-radius: 40rpx !important;
		font-size: 30rpx !important;
		line-height: 80rpx !important;
		box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
		text-align: center;
	}
</style>